<!-- 逻辑 -->
<script setup lang="ts">
// 1.导入reactive 函数
import { reactive } from "vue";

// 2.通过reactive 将对象转为 响应式 （状态变量）
const state = reactive ({
  name:'周杰伦',
  song:['一路向北']
})

const songs = () => {
  state.song.push('不能说的秘密')
}

// 3.注意 reactive 不可以包装基本数据类型
</script>

<!-- 结构 -->
<template>
  <h1 @click="songs">{{ state.song }}</h1>
  <h1>{{ state.name }}</h1>
  <h1 @click="state.name +='!'">{{ state.name }}</h1>

</template>

<!-- 样式 -->
<style scoped></style>
